<template>
  <div class="curveReportHome">
    <div class="menu">
      <el-menu :default-active="activeIndex" class="menu-list" @select="handleSelect">
        <el-menu-item index="incomeReport">收益报表</el-menu-item>
        <el-menu-item index="electricityReport">电量报表</el-menu-item>
        <el-menu-item index="meterReport">电表报表</el-menu-item>
        <el-menu-item index="powerCurve">功率曲线</el-menu-item>
        <el-menu-item index="pcsCurve">PCS曲线</el-menu-item>
        <el-menu-item index="batteryStackCurve">电池堆曲线</el-menu-item>
        <el-menu-item index="singleCurve">单体曲线</el-menu-item>
        <el-menu-item index="batteryTemperatureReport">电池温度报表</el-menu-item>
        <el-menu-item index="batteryVoltageReport">电池电压报表</el-menu-item>
        <el-menu-item index="exportList">导出列表</el-menu-item>
      </el-menu>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const activeIndex = ref('incomeReport');

const handleSelect = (key: string) => {
  router.push(`/analysis/curveReport/${key}`);
};

onMounted(() => {
  // 获取当前路由的最后一段作为activeIndex
  const pathParts = route.path.split('/');
  const currentRoute = pathParts[pathParts.length - 1];

  if (currentRoute !== 'curveReport') {
    activeIndex.value = currentRoute;
  } else {
    // 默认跳转到收益报表
    router.push('/analysis/curveReport/incomeReport');
  }
});
</script>

<style lang="scss" scoped>
.curveReportHome {

  display: flex;
  justify-content: space-between;

  .menu {
    width: 1.64rem;
    padding-bottom: 1rem;
    background: url('~@/assets/images/monitor/menu_bg.png') no-repeat center bottom, linear-gradient(180deg, #FFFFFF 0%, #E7F1FF 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    margin-right: 0.08rem;
    overflow: hidden;

    .menu-list {
      width: 1.36rem;
      margin: 0.36rem auto 0;
      border-right: none;
      background: transparent;

      :deep(.el-menu-item) {
        height: 0.4rem;
        line-height: 0.4rem;
        padding: 0 !important;
        text-align: center;
        font-size: 0.16rem;
        margin-bottom: 0.08rem;
        align-items: center;
        justify-content: center;

        &.is-active {
          background: rgba(230, 240, 254, 1);
          border: 1px solid rgba(205, 225, 254, 1);
          box-shadow: 0px 4px 4px 0px rgba(1, 21, 50, 0.15);
          border-radius: 0.04rem;
          color: #046AF9;
        }

        &:hover {
          background: rgba(230, 240, 254, 1);
          box-shadow: 0px 4px 4px 0px rgba(1, 21, 50, 0.15);
          border-radius: 0.04rem;
        }
      }
    }
  }

  .main {
    flex: 1;

    :deep(.conditions-form) {
      box-shadow: 0px 4px 8px 0px #00000026;
    }
  }
}
</style>
